<template>
  <div class="page-containter" >
    <uni-nav-bar fixed shadow :border="false" title="中级项目管理考试"
                 left-icon="left" @clickLeft="onClickLeft" v-if="navBarShow">
				  <template #right>
					  <button class="nav-bar-btn" type="primary" size="medium" round  :disabled="btnStatus"
					          @click="submit">提交</button>
				  </template>
    </uni-nav-bar>
    <div class="common-wrap exam-wrap">
      <div class="test-wrap" v-for="(item,index) in navList" :key="index">
        <div class="test-title fc-333 fw-b" :id="'parent' + index"
             v-if="!item.hideStatus && detail.isScoreVisable === '1'">
          {{titleNum[item.index] + item.name}}、（共{{item.totalQuestionsNum || 0}}题，共{{item.totalScore || 0}}分）
        </div>
        <div class="test-title fc-333 fw-b" :id="'parent' + index" v-else-if="!item.hideStatus">
          {{titleNum[item.index] + item.name}}、（共{{item.totalQuestionsNum || 0}}题）
        </div>
        <exam :testItem="it" :testIndex="it.index" v-for="(it,i) in item.paperQuestionsIdList" :key="i" :answer="detail.isOpen === '1' ||
                (detail.isShowAnswer === '1' && answer[it.paperQuestionsId].status) || false"
              :reply="detail.isShowAnswer === '1'" @input="changeInput" @sureInput="sureVal"
              :idkey="it.paperQuestionsId" :showScore="detail.isScoreVisable === '1'"
              :val="answer[it.paperQuestionsId].val" :typeList="typeList"
              :videoShow="!simplifyShow && !showActionDialog && !submitShow && !progressShow"
              v-if="(typeof it !== 'string')"></exam>
      </div>
    </div>
    <div class="btn-wrap flex-wrap flex-middle" v-if="pageAll.length">
      <button round class="btn" type="primary" @click="pre(0)" v-if="pageAll[0].current > 1">上一页</button>
      <button round class="btn" type="primary" plain disabled v-else>上一页</button>
      <div class="btn-text flex-item flex-wrap flex-middle flex-center" @click="changeSimplifyShow">
        <image class="btn-img" src="@/static/image/menu.png" />
          <span class="fs-14 fc-333">{{pageAll[0] && pageAll[0].current}}</span>
          <span class="fs-14 fc-ddd">/</span>
          <span class="fs-14 fc-999">{{pageAll[0] && pageAll[0].total}}</span>
      </div>
      <button round class="btn" type="primary" @click="next(0)"
              v-if="pageAll[0].current < pageAll[0].total">下一页</button>
      <button round class="btn" type="primary" plain disabled v-else>下一页</button>
    </div>
    <van-popup v-model="simplifyShow" position="bottom" :style="{ height: '60%' }">
      <div class="simplify-wrap">
        <div class="common-wrap">
          <div class="simplify-top flex-wrap flex-middle">
            <button class="simplify-btn" type="primary" round @click="submit"
                    :disabled="btnStatus">提交</button>
            <div class="flex-item"></div>
            <div class="flex-wrap flex-middle flex-center" @click="changeSimplifyShow">
              <image class="simplify-img" src="@/static/image/menu.png" />
                <span class="fs-14 fc-333">{{pageAll[0] && pageAll[0].current}}</span>
                <span class="fs-14 fc-ddd">/</span>
                <span class="fs-14 fc-999">{{pageAll[0] && pageAll[0].total}}</span>
            </div>
          </div>
        </div>
        <div class="simplify-bottom">
          <div class="time-bottom flex-wrap flex-text-mid">
            <span class="time-bottom-item active-0">未做</span>
            <span class="time-bottom-item active-1">正确</span>
            <span class="time-bottom-item active-2">错误</span>
            <span class="time-bottom-item active-3">待阅</span>
            <span class="time-bottom-item active-4">已阅</span>
          </div>
          <div class="test-list">
            <div class="test-item-wrap" v-for="(item,index) in simplify" :key="index">
              <div class="test-title font-14 font-bold"
                   @click="handleMove(item.id, index, item.child[0] || null)">{{item.name}}</div>
              <div class="test-list-wrap">
								<span :class="['test-item',
                                pageAll[0] && pageAll[0].current === it.relative ? 'current' : '',
                                answer[it.questionsId.paperQuestionsId].flag ? 'select' : '',
                                answer[it.questionsId.paperQuestionsId].status ? 'active-' + answer[it.questionsId].status : '']"
                      v-for="(it,ind) in item.child" @click="handleMove(it.id, index, it)"
                      :key="ind">{{it.relative}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-overlay :show="progressShow">
      <div class="submit-wrap progress-wrap">
        <div class="submit-title fs-16 fc-333 fw-b">试卷提交进度</div>
        <div class="submit-body">
          <van-circle v-model="currentProgress" :rate="progress"
                      :text="currentProgress === 100 ? '提交成功' : currentProgress + '%'" speed="100" size="106px"
                      layer-color="#BBE4E1"></van-circle>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {
  guid,
  parse,
  stringify,
  copyBasic,
  deepClone,
  getFormTime,
  getCurrentTime,
  getTime
} from '@/assets/js/util.js'
import exam from '@/view/exam/exam.vue'
import CryptoJS from 'crypto-js'
import {sha256} from "js-sha256";
import VanPopup from "@/components/vant/van-popup/van-popup.vue";
import VanDialog from "@/components/vant/van-dialog/van-dialog.vue";
import VanOverlay from "@/components/vant/van-overlay/van-overlay.vue";
import VanCircle from "@/components/vant/van-circle/van-circle.vue";
import mockTypeList from "@/mock/exam/typeList.json"
import profile from "@/mock/exam/profile.json"
import listDataMock from "@/mock/exam/listData.json"
export default {

  head() {
    return {
      title: '学习平台'
    }
  },
  data() {
    return {
      navBarShow: false,
      user: {},
      id: '',
      type: '',
      titleNum: ['一、', '二、', '三、', '四、', '五、', '六、', '七、', '八、', '九、', '十、'],
      detail: {},
      exam: {},
      simplify: [],
      answer: {},
      listAll: [],
      pageAll: [],
      btnStatus: false,
      simplifyShow: false,
      changePageStatus: false,
      submitShow: false,
      examRate: 0,
      examNum: 0,
      currentProgress: 0,
      progress: 0,
      showActionDialog: false,
      typeList: []
    }
  },
  components: {
    VanCircle,
    VanOverlay,
    VanDialog,
    VanPopup,
    exam
  },
  onLoad(query) {
	this.navBarShow = true
  },
  mounted() {
      this.user = profile.data
      this.getStatus()
  },
  onHide() {
    if (this.visibilitychange) {
      this.lastTime = new Date().getTime()
    }
  },
  onShow() {
    if (this.visibilitychange) {
      this.lastTime = 0
    }
  },
  onNavigationBarButtonTap() {
      this.submit()
  },
  computed: {
    navList() {
      let list = this.getPageData(this.listAll, this.pageAll),
          prev = [],
          next = [],
          index = 0
      return list
    },
    progressShow() {
      return !!this.progress
    }
  },
  watch: {
    answer: {
      deep: true,
      handler(val) {
        let total = this.pageAll[0] && this.pageAll[0].total || 0
        let examNum = 0
        for (let i in val) {
          if (val[i].flag) {
            examNum++
          }
        }
        this.examNum = examNum
        this.examRate = examNum / total * 100
      }
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack({
        delta: 1
      })
    },
    changeSimplifyShow() {
      this.simplifyShow = !this.simplifyShow
    },
    getTime(s) {
      return getTime(s)
    },
    
    getPageData(list, page) {
      let arr = []
      let index = 0
      page.map(e => {
        let start = (e.current - 1) * e.size
        let end = e.current * e.size - 1
        list.map(item => {
          let tab = null
          item.paperQuestionsIdList.map((question, i) => {
            if (index >= start && index <= end && !tab && i) {
              let curTab = copyBasic(item)
              curTab.hideStatus = true
              tab = curTab
              tab.paperQuestionsIdList = []
              tab.paperQuestionsIdList.push(question)
            } else if (index >= start && index <= end && !tab) {
              let curTab = copyBasic(item)
              tab = curTab
              tab.paperQuestionsIdList = []
              tab.paperQuestionsIdList.push(question)
            } else if (index >= start && index <= end) {
              tab.paperQuestionsIdList.push(question)
            }
            index++
          })
          if (tab) arr.push(tab)
        })
      })
      return arr
    },
    getStatus() {
          this.getInfo()
    },
    next(index, page) {
      if (this.pageAll[index] && this.pageAll[index].total > this.pageAll[index].current && !this
          .changePageStatus) {
        this.changePageStatus = true
        this.$set(this.pageAll[index], 'current', ++this.pageAll[index].current)
        setTimeout(() => {
          // this.startMoveTop()
          this.changePageStatus = false
        }, 100)
      }
    },
    pre(index, page) {
      if (this.pageAll[index] && this.pageAll[index].current > 1 && !this.changePageStatus) {
        this.changePageStatus = true
        this.$set(this.pageAll[index], 'current', --this.pageAll[index].current)
        setTimeout(() => {
          // this.startMoveTop()
          this.changePageStatus = false
        }, 100)
      }
    },
    startMoveTop() {
      if (document.querySelector('.exam-wrap'))
        document.querySelector('.exam-wrap').scrollIntoView({
          behavior: "smooth", // 平滑过渡
          block: "start"
        })
    },
    setPage(index, page) {
      if (page > 0 && page <= this.pageAll[index].total) {
        this.$set(this.pageAll[index], 'current', page)
      }
    },
    handleMove(id, index, ob) {
      this.simplifyShow = false
      this.checkMove(id, ob)
    },
    checkMove(id, ob) {
      let index, page
      index = parseInt((ob.id || id).replace('child', '')) + 1
      page = Math.ceil(index)
      if (this.pageAll[0].current !== page) {
        this.setPage(0, page)
      }
    },
    // 详情
    getInfo(param, done) {
       this.nowDate ="2025-08-04 14:18:11"
       this.validSign = "1952247675940380672"
        this.getListData()
        done && done(false)
      
    },
    getListData() {   
        this.setData()
        let arr = mockTypeList.data;
        let typeList = []
        arr.forEach(e => {
          typeList[e.typeId] = e.name
        })
        this.typeList = typeList
    },
    setData() {
      this.listAll = listDataMock.list
      this.pageAll = listDataMock.page
      this.simplify = listDataMock.simplify
      this.answer = listDataMock.answer
    },
    // 输入多选处理
    checkArr(current, target) {
      if (!Array.isArray(current) || !Array.isArray(target)) {
        return false
      }
      if (current.length === target.length) {
        let arr = current.filter(e => target.findIndex(i => i === e) >= 0)
        return arr.length === current.length
      } else {
        return false
      }
    },
    // 输入处理
    changeInput(key, val) {
      if (this.detail.isOpen === '1') {
        this.sureVal(key, val)
      }
      if (this.answer[key].type === 'M' && val.length) {
        this.answer[key].flag = true
      } else if (this.answer[key].type === 'F' && val.length && val.filter(e => e).length) {
        this.answer[key].flag = true
      } else if (this.answer[key].type !== 'M' && this.answer[key].type !== 'F' && val) {
        this.answer[key].flag = true
      } else {
        this.answer[key].flag = false
      }
      if (this.answer[key].uploadStatus) {
        this.answer[key].uploadStatus = false
      } else {
        this.answer[key].upload = false
      }
      if (this.answer[key].flag && this.listAll[this.answer[key].part].paperQuestionsIdList[this.answer[key]
          .index].fillVali) {
        this.$set(this.listAll[this.answer[key].part].paperQuestionsIdList[this.answer[key].index], 'fillVali',
            false)
      }
      this.answer[key].val = val
    },

    sureVal(key, val, save) {
      if (this.detail.isOpen === '1' || this.detail.isShowAnswer === '1') {
        if (this.answer[key].type === 'M' && val && val.length) {
          let arr = this.answer[key].answer.split(',').filter(e => e)
          this.answer[key].status = this.checkArr(arr, val) ? 1 : 2
        } else if ((this.answer[key].type === 'R' || this.answer[key].type === 'T') && val) {
          let answer = this.answer[key].answer.replace(',', '')
          this.answer[key].status = answer === val ? 1 : 2
        } else if (this.answer[key].type === 'F' && val.length && val.filter(e => e).length) {
          this.answer[key].status = 3
        } else if (this.answer[key].type === 'A' && val) {
          this.answer[key].status = 3
        } else {
          this.answer[key].status = 0
        }
      }
    },
    submit() {
      this.progress = true;
	  this.currentProgress=100;
	  setTimeout(()=>{
		 uni.navigateBack({
			 delta:1
		 })
	  },1500)
    },
    // 解密
    decryptByDES(ciphertext, key) {
      let keyHex = CryptoJS.enc.Utf8.parse(key);
      let decrypted = CryptoJS.DES.decrypt({
        ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
      }, keyHex, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      })
      return decrypted.toString(CryptoJS.enc.Utf8)
    }
  }
}
</script>
<style lang="scss" scoped>
.page-containter {
  .nav-bar-btn {
    width: 60px;
    height: 28px;
	font-size: 14px;
  }

  .page-header {
    position: raletive;
    height: 68px;
    background: #FFFFFF;

    .callback {
      position: absolute;
      width: calc((100% - 1200px)/2);
      min-width: 90px;
      text-align: right;

      &:before {
        content: '';
        display: block;
        width: 7px;
        height: 7px;
        position: absolute;
        border-left: 1px solid #333;
        border-bottom: 1px solid #333;
        -webkit-transform: translate(0, -50%) rotate(45deg);
        transform: translate(0, -50%) rotate(45deg);
        top: 50%;
        left: 30px;
      }
    }
  }

  .page-title {
    padding: 40px 0;
    line-height: 34px;
    text-align: center;
  }

  .common-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;

    &.exam-wrap {
      padding: 46px 15px 60px;
    }

    .test-wrap {
      .test-title {
        padding: 20px 0 5px;
        font-size: 16px;
      }
    }
  }

  .simplify-wrap {
    .test-title {
      font-size: 14px;
      color: #999;
      cursor: pointer;
      padding: 0 0 10px;
      transition: color 0.3s;
      word-break: break-all;

      &:hover {
        color: #1EA69D;
      }
    }

    .right-top {
      padding: 0 20px;
      background: #fff;
      margin-bottom: 20px;

      .time-title {
        height: 50px;

        &:not(:last-child) {
          border-bottom: 1px solid #EEEEEE;
        }
      }
    }

    .simplify-top {
      height: 54px;
      background: #FFFFFF;
      border-bottom: 1px solid #EEEEEE;

      .simplify-btn {
        width: 60px;
        height: 36px;
		font-size: 14px;
      }

      .simplify-img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }
    }

    .simplify-bottom {
      background: #fff;
    }

    .test-list {
      max-height: calc(60vh - 104px);
      overflow: auto;
    }

    .test-item-wrap {
      padding: 0 15px 30px;
    }

    .test-item {
      display: inline-block;
      width: 42px;
      height: 42px;
      font-size: 16px;
      color: #333;
      line-height: 40px;
      background: #FFFFFF;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 50%;
      border: 1px solid #EEEEEE;

      &:hover {
        color: #1EA69D;
        border-color: #1EA69D;
      }

      &:not(:nth-child(6n + 1)) {
        margin-left: 18px;
      }

      &:nth-child(n + 7) {
        margin-top: 18px;
      }

      &.select {
        background: #DDDDDD;
      }

      &.current {
        color: #1EA69D;
        border: 1px solid #1EA69D;
      }

      &.active-1 {
        color: #1EA69D;
        background: rgba(30, 166, 157, 0.14);
        border-color: rgba(30, 166, 157, 0.14);
      }

      &.active-2 {
        color: #DF0000;
        background: rgba(223, 0, 0, 0.14);
        border-color: rgba(223, 0, 0, 0.14);
      }

      &.active-3 {
        color: #F1C82C;
        background: rgba(241, 200, 44, 0.14);
        border-color: rgba(241, 200, 44, 0.14);
      }

      &.active-4 {
        color: #E8881D;
        background: rgba(232, 136, 29, 0.14);
        border-color: rgba(232, 136, 29, 0.14);
      }
    }

    .time-bottom {
      padding: 15px;

      .time-bottom-item {
        color: #333;
        font-size: 12px;

        &:before {
          content: '';
          display: inline-block;
          width: 8px;
          height: 8px;
          background: #FFFFFF;
          margin-right: 6px;
          border-radius: 50%;
        }

        &:not(:first-child):before {
          margin-left: 15px;
        }

        &:nth-child(1):before {
          border: 1px solid #bbb;
        }

        &:nth-child(2):before {
          background: #1EA69D;
        }

        &:nth-child(3):before {
          background: #DF0000;
        }

        &:nth-child(4):before {
          background: #F1C82C;
        }

        &:nth-child(5):before {
          background: #E8881D;
        }
      }
    }
  }

  .btn-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 54px;
    padding: 0 20px;
    background: #fff;
    border-top: 1px solid #EEEEEE;

    .btn {
      width: 100px;
      height: 40px;
    }

    .btn-text {
      padding: 10px 0;

      .btn-img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }
    }
  }

  .submit-wrap {
    position: fixed;
    left: calc(50% - 142.5px);
    top: calc(50% - 132px);
    width: 285px;
    height: 264px;
    padding: 20px 15px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #979797;

    &.progress-wrap {
      height: 224px;
    }

    .submit-title {
      text-align: center;
    }

    .submit-body {
      padding: 20px 0 0;

      .van-circle {
        display: block;
        margin: 0 auto;
        position: relative;
      }

      .circle-text {
        position: absolute;
        padding-top: 24px;
        width: 100%;
        height: 100%;
        padding-top: calc(50% - 24px);

        .fs-12 {
          margin-bottom: 3px;
        }
      }

      .submit-btn {
        padding: 20px 0 0;

        .btn {
          width: 120px;
          height: 40px;

          &.btn-grey {
            color: #666;
            background: #F5F5F5;
            border-color: #F5F5F5;
          }

          &+.btn {
            margin-left: 15px;
          }
        }
      }
    }
  }

  .form-field {
    padding: 0 20px;
    margin: 15px 0;

    &.code {
      :deep(.van-cell__value) {
        padding: 0 0 0 10px;
      }
    }

    &.van-cell::after {
      border: none;
    }

    :deep(.van-cell__title) {
      width: 5.1em;
    }

    :deep(.van-cell__value) {
      padding: 5px 10px;
      border: 1px solid #EEEEEE;
      border-radius: 4px;
    }

    .valicode {
      cursor: pointer;
      width: 90px;
      height: 38px;
      margin-left: 20px;
    }

    .van-button--primary {
      color: #1EA69D;
      background-color: #fff;
      border: none;

      &.van-button--disabled {
        color: #c0c4cc;
      }
    }
  }

  .title {
    padding: 10px 0;
    text-align: center;
  }
}
</style>